<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {getRequest, postPutRequest} from "@/api/data.ts";
import {FormInst, useMessage} from 'naive-ui';
import ImageSelection from "@components/ImageSelection";
import {UseAppStore} from "@/stores/app.ts";

const message = useMessage()
const appStore = UseAppStore();
//基本设置
const loadings = ref<boolean>(false);
const btnLoading = ref<boolean>(false);
const basic_form = ref<FormInst | null>(null);
const basicForm = ref({
  title: null,
  logo: null,
  contacts: null,
  phone: null,
  copyright: null,
  icp: null,
  icp_url: null,
  qrcode: null,
});
const basicFormRules = ref({
  title: {
    required: true,
    trigger: ['blur', 'input'],
    message: '网站名称不能为空'
  },
  logo: {
    required: true,
    trigger: ['blur', 'input'],
    message: '请上传网站Logo'
  }
})
const handelSave = (e: MouseEvent) => {
  e.preventDefault();
  basic_form.value?.validate((errors) => {
    if (!errors) {
      btnLoading.value = true;
      postPutRequest('conf/save_basic', basicForm.value).then((result: ResponseResult) => {
        if (result.code === 200) {
          message.success(result.message, {
            duration: 1500,
            onLeave() {
              btnLoading.value = false;
              appStore.setTitle(basicForm.value.title);
              appStore.setLogo(basicForm.value.logo);
              appStore.setICP(basicForm.value.icp, basicForm.value.icp_url);
              appStore.setCopyright(basicForm.value.copyright);
            }
          })
        } else {
          message.error(result.message);
          btnLoading.value = false;
        }
      })
    }
  })
}
//获取配置参数
const getSettings = async () => {
  await getRequest('conf/get_settings', {type: 'basic'}, true).then((result: ResponseResult) => {
    const {data} = result;
    const {basic} = JSON.parse(data);
    if (basic) {
      basicForm.value = {
        title: basic.title ?? null,
        logo: basic.logo ?? null,
        contacts: basic.contacts ?? null,
        phone: basic.phone ?? null,
        copyright: basic.copyright ?? null,
        icp: basic.icp ?? null,
        icp_url: basic.icp_url ?? null,
        qrcode: basic.qrcode ?? null,
      };
    }
    loadings.value = false;
  })
}

onMounted(() => {
  loadings.value = true;
  getSettings()
})
</script>

<template>
  <n-form
      ref="basic_form"
      :model="basicForm"
      :rules="basicFormRules"
      require-mark-placement="left"
      label-placement="left" :label-width="90">
    <n-spin size="medium" v-model:show="loadings">
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="网站名称:" path="title">
          <n-input v-model:value="basicForm.title" placeholder="网站名称" maxlength="30" show-count clearable/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="网站Logo:" path="logo">
          <image-selection v-model:value="basicForm.logo"/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="联系人:" path="contacts">
          <n-input v-model:value="basicForm.contacts" placeholder="联系人" maxlength="30" show-count
                   clearable/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="联系电话:" path="phone">
          <n-input v-model:value="basicForm.phone" maxlength="11" show-count placeholder="联系电话"
                   clearable/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="公众二维码:" path="qrcode">
          <image-selection v-model:value="basicForm.qrcode"/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="版权信息:" path="copyright">
          <n-input v-model:value="basicForm.copyright" placeholder="版权信息" clearable/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="ICP备案号:" path="icp">
          <n-input v-model:value="basicForm.icp" placeholder="ICP备案号" clearable/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="备案号链接:" path="icp_url">
          <n-input v-model:value="basicForm.icp_url" placeholder="请输入链接，例如：http://www.beian.gov.cn"
                   clearable/>
        </n-form-item-gi>
      </n-grid>
      <n-grid :cols="24" :x-gap="24">
        <n-form-item-gi :span="8" label="&nbsp;">
          <n-button type="primary" :loading="btnLoading" @click="handelSave">保存基本设置</n-button>
        </n-form-item-gi>
      </n-grid>
    </n-spin>
  </n-form>
</template>

<style scoped lang="scss">

</style>